<!--
 * @Description: element
 * @Author: rendc
 * @Date: 2025-11-03 09:11:35
 * @LastEditors: rendc
 * @LastEditTime: 2025-11-03 11:09:36
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element</title>
  <!-- defer -->
  <!-- 内联脚本 -->
  <!-- <script>
    // 获取div标签
    // 1. getElementById()
    var myApp = "myApp";
    // document.getElementById("myApp");
    var result = document.getElementById(myApp);
    console.log('🤡 CC - result:', result); // null
  </script> -->
  <!-- 外部脚本 defer 等待dom加载完成后执行 -->
  <!-- <script src="./js/test.js" defer></script> -->
  <!-- 外部脚本&内联脚本 错误写法-->
  <!-- <script src="./js/test.js">
    console.log("test2.js");
  </script> -->
</head>
<body>
  <div class="app app2" id="myApp">
    <!-- div
    <p>段落</p> -->
  </div>
  <div id="myApp2">
    <span id="span1">span1</span>
  </div>
</body>
<script>
  // 获取div标签
  // 1. getElementById()
  var myApp = "myApp";
  // document.getElementById("myApp");
  var result = document.getElementById(myApp);
  // 2. getElementsByClassName()
  // 方法名注意加s Elements
  // 返回值类型 类数组[]
  // var result = document.getElementsByClassName("app");
  // console.log('🤡 CC - body - result:', result); // []
  // 3. getElementsByTagName()
  // 方法名注意加s Elements
  // 返回值类型 类数组[]
  // var result = document.getElementsByTagName("div");
  console.log('🤡 CC - body - result.attributes:', result.attributes);
  console.log('🤡 CC - body - result.childElementCount:', result.childElementCount);
  console.log('🤡 CC - body - result.children:', result.children);
  console.log('🤡 CC - body - result.classList:', result.classList);
  console.log('🤡 CC - body - result.className:', result.className);
  result.className += " newClass";
  console.log('🤡 CC - body - result.className:', result.className);
  console.log('🤡 CC - body - result.clientHeight:', result.clientHeight);
  console.log('🤡 CC - body - result.innerHTML:', result.innerHTML);
  console.log('🤡 CC - body - result.outerHTML:', result.outerHTML);
  var resultId = result.getAttribute("id");
  console.log('🤡 CC - resultId:', resultId);
  var resultClass = result.setAttribute("class","newClass2");
  var resultClass = result.getAttribute("class");
  console.log('🤡 CC - resultClass:', resultClass);
  // result.innerHTML ="hello";
  // <span id="span2">span2</span>
  var span2 = document.createElement("span");
  span2.id = "span2";
  span2.innerHTML = "span2";
  console.log('🤡 CC - span2:', span2);
  var span1 = document.getElementById("span1");
  var result = span1.after(span2);
  console.log('🤡 CC - result:', result);
</script>
</html>